import React from "react";

// classNames用于复杂情况下，不同的条件来添加不同的样式的
import classNames from "classnames/bind";
import styles from "./05-class.css";

let cx = classNames.bind(styles);

const done = true;

const App = () => {
  let className = cx({
    green: done,
    red: done && 2 < 1,
  });

  return (
    <>
      <h2>不同条件添加不同样式</h2>
      {/* 当条件比较简单的时候，可以使用短路运算或者三目就能搞定 */}
      {/* <p className={done ? "green" : "red"}>hello react!</p> */}
      {/* <p className={done && "green"}>hello react!</p> */}

      <p className={className}>hello react!</p>
    </>
  );
};

export default App;
